<template>
    <div class="re-container">
        <div class="title">购买登记信息</div>
        <van-form @failed="onFailed" @submit="formSubmit">
            <van-cell-group inset>
                <van-field required :rules="[{ required: true, message: '请输入姓名' }]" v-model="formData.name" label="用户名"
                    name="pattern" placeholder="请输入姓名" />
                <van-field required :rules="[{ required: true, message: '请输入联系方式' }]" v-model="formData.phone"
                    label="联系方式" name="pattern" placeholder="请输入联系方式" />
                <van-field required :rules="[{ required: true, message: '请选择购买时间' }]" v-model="formData.gmTime" is-link
                    name="datePicker" label="购买时间" placeholder="点击选择购买时间" @click="showPicker = true" />
                <van-popup v-model:show="showPicker" position="bottom">
                    <van-date-picker @confirm="onConfirm" @cancel="showPicker = false" />
                </van-popup>
                <van-field required :rules="[{ required: true, message: '请输入购买产品' }]" v-model="formData.ypmc"
                    label="购买产品" name="pattern" placeholder="请输入购买产品" />
                <van-field required :rules="[{ required: true, message: '请输入溯源码' }]" v-model="formData.shenfenma"
                    label="溯源码" name="pattern" placeholder="请输入溯源码" />
                <van-field required :rules="[{ required: true, message: '请输入重量' }]" v-model="formData.zhongliang"
                    label="重量（kg）" name="pattern" placeholder="请输入" />
                <van-field disabled label="" name="pattern" placeholder="" />
            </van-cell-group>
            <van-checkbox @click="handleRadio" icon-size="12px" style="font-size: 14px;margin-left:33px"
                checked-color='#46cf89' v-model="checked" shape="square">本人承诺以上信息的真实性</van-checkbox>
            <div class="btn-wrap">
                <van-button @click="handleCancel" color="#e0dcdcc4" style="width: 100px;" round block
                    native-type="submit">
                    取消
                </van-button>
                <van-button color="#46cf89" style="width: 100px;" round block type="primary" native-type="submit">
                    提交
                </van-button>
            </div>
        </van-form>
    </div>
</template>

<script setup>
import { addByXieYouYuan } from "../../apis/home";
import { useRouter } from 'vue-router'
import { ref } from "vue";
const router = useRouter()
const data = JSON.parse(localStorage.getItem('formData'))
const formData = ref({ name: '', phone: '', gmTime: '', ypmc: '', shenfenma: data.suyuanma, zhongliang: '' })
const showPicker = ref(false);
const checked = ref(false)

const onFailed = (errorInfo) => {
    console.log('failed', errorInfo);
};

const handleCancel = () => {
    router.push('/home')
}

const handleRadio = (event) => {
    console.log(checked.value);
}

const onConfirm = ({ selectedValues }) => {
    formData.value.gmTime = selectedValues.join('-');
    console.log(formData.value.gmTime);
    showPicker.value = false;
};

const formSubmit = () => {
    console.log(66666);
    if (checked.value == false) {
        showDialog({
            title: '提示',
            message: '请勾选“承诺选框”。',
        }).then(() => {
            // on close
        });
    } else {
        addByXieYouYuan(formData.value).then((res) => {
            if (res.status == 200) {
                showDialog({
                    title: '提示',
                    message: '提交成功！',
                }).then(() => {
                    // on close
                    router.push('/home')
                });
            } else {
                showDialog({
                    title: '提示',
                    message: '提交失败，请重试',
                }).then(() => {
                });
            }
        })
    }
}

</script>

<style lang="scss" scoped>
.re-container {
    padding: 20px;

    .title {
        font-size: 20px;
        font-weight: 600;
    }

    .van-form {
        margin-top: 20px;
        color: #e0dcdcc4;
    }

    .btn-wrap {
        padding: 0 50px;
        margin-top: 70px;
        display: flex;
        justify-content: space-around;

    }
}
</style>